<template>


    <a-form ref="formRef" @finish="handleFinish" :model="form" name="basic" :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目名称" name="proName">
                    <a-input-search v-model:value="form.proName" :disabled="disabled" style="width: 100%"
                        placeholder="请选择项目" @click="onSearch" @search="onSearch" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目编号" name="proCode" :rules="[{ required: true }]">
                    <a-input v-model:value="form.proCode" disabled style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>

          
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目类型" name="bidType" :rules="[{ required: true }]">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" disabled v-model:value="form.bidType" style="width: 100%" :options="xmtypes"></a-select>

                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="预计开标日期" name="expectBidTime" :rules="[{ required: true }]">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled"
                        v-model:value="form.expectBidTime" style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <!-- <a-col :span="12">
                    <a-form-item label="发起人" name="initiatorName" :rules="[{ required: true }]">
                        <a-input v-model:value="form.initiatorName" :disabled="disabled" style="width: 100%" placeholder="" />
                    </a-form-item>
                </a-col> -->
            <a-col :span="12">
                <a-form-item label="是否为挂靠" :rules="[{ required: true }]" name="isAttache">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" v-model:value="form.isAttache" :disabled="disabled" style="width: 100%">
                        <a-select-option value="1">是</a-select-option>
                        <a-select-option value="0">否</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="方案报价" name="bidPlanAmount" :rules="[{ required: true }]">
                    <a-input-number :precision="2" :min="0" v-model:value="form.bidPlanAmount" :disabled="disabled"
                        style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <!-- <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="方案报价" name="bidPlanAmount" :rules="[{ required: true }]">
                    <a-input-number :precision="2" :min="0"  v-model:value="form.bidPlanAmount" :disabled="disabled"
                        style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">

            </a-col>
        </a-row> -->

        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="备注" name="remark">
                    <a-textarea v-model:value="form.remark" :disabled="disabled" :rows="4" placeholder=""
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>


        <a-row :gutter="16" class="mb-2">

            <a-col :span="8" style="font-weight: 600;">
                竞争对手明细
            </a-col>
            <a-col :span="16" class="text-right" v-if="!disabled">
                <a-button class="ml-2" @click="onAddRival" type="primary">新增竞争对手</a-button>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" label="" name="bidCompetitors">
                <a-table tableLayout="fixed" :data-source="form.bidCompetitors" bordered :columns="rivalColumns"
                    class="mb-2">
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.key === 'index'">
                            {{ index + 1 }}
                        </template>
                        <template v-if="column.key === 'company'">
                            {{ record.company || record.competitor?.company }}
                        </template>
                        <template v-if="column.key === 'legalPerson'">
                            {{ record.legalPerson || record.competitor?.legalPerson }}
                        </template>
                        <template v-if="column.key === 'control' && !disabled">
                            <div>
                                <a-divider type="vertical" />
                                <a-popconfirm title="确定删除此数据源？" @confirm="removeRival(index)">
                                    <a-button type="link" danger size="small">删除</a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                    </template>
                </a-table>
            </a-form-item>
        </a-row>
        <system :value="form"></system>
    </a-form>

    <projectSelection ref="proSelect" @onClose="prSelectOk" :value="form.proSelectRecords" />
    <rival ref="rivals" @onClose="AddRival"></rival>


</template>
<script setup>
import system from '@/components/Task/system.vue'
import api from '@/api/pm/bid/index'
import projectSelection from '@/components/pm/projectSelection.vue'
import rival from '@/views/pm/bid/components/rival.vue'
import { xmtypes, tbtypes } from '@/utils/constants.js'
const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})
const visible = ref(false)
const formRef = ref()
const show = (record) => {
    visible.value = true
    form.value = { ...record }
    if (record) {
        api.competitorPageByBid({ bidId: record.id }).then((res) => {
            form.value.bidCompetitors = res.records;
        })
    }
}

const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    }).catch((err) => {

    });
}
const form = ref({
});

const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    visible.value = false;
    emits('OnClose', refresh)
};

const handleFinish = (values) => {
    // pmApi.proinfoadd

    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const rivalColumns = [

    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 80,
        align: 'center'

    },
    {
        title: '公司名称',
        dataIndex: 'company',
        key: 'company',
        width: 140,
        align: 'center',
        ellipsis: true
    },
    {
        title: '公司法人',
        dataIndex: 'legalPerson',
        key: 'legalPerson',
        width: 100,
        align: 'center',
        ellipsis: true
    },
    {
        title: '投标报价',
        dataIndex: 'bidPrice',
        key: 'bidPrice',
        width: 120,
        align: 'center',
        ellipsis: true
    },
    {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
        width: 100,
        align: 'center',
        ellipsis: true
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        width: (!props.disabled ? 100 : 1),
        align: 'center',
        fixed: (!props.disabled ? "right" : ""),
        colSpan: (!props.disabled ? 1 : 0)
    }
];
const rivals = ref()
const onAddRival = () => {
    rivals.value.show()
}
const AddRival = (rows) => {
    const selectedRows = JSON.parse(JSON.stringify(rows));
    selectedRows.forEach(item => item.competitorId = item.id)
    form.value.bidCompetitors = selectedRows
}


const removeRival = (index) => {
    form.value.bidCompetitors.splice(index, 1)
}

const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择 ", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
    form.value.proCode = selectRecords[0].code
    form.value.bidType = selectRecords[0].type
    form.value.proSelectRecords = selectRecords;

}



watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
            // form.value.bidCompetitors = []
            // if (form.value.id) {
            //     api.competitorPageByBid({ bidId: form.value.id }).then((res) => {
            //         form.value.bidCompetitors = res.records;
            //     })
            // }
        }
    },
    { deep: true, immediate: true }
)

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.flowCode = "FLW_BID"
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}
defineExpose({
    getData,
    resetForm,
    show
})

</script>